.page-title {
	padding: 20px 0;
	background: #fefefe;
}

.editor-page,
.redactor-editor {
	height: 500px;
	overflow: auto;
	font-family: "Roboto Slab";
	padding-right: 80px;
}
/*.editor-page h2 {
	font-size: 17px;
	color: #000;
}*/
.editor-page p,
.redactor-editor p {
	font-family: "Roboto Slab";
	text-align: justify;
	color: #481301;
	text-indent: 25px;
	word-spacing: 4px;
	line-height: 25px;
	position: relative;
}

.redactor-editor ul, ol, table {
	position: relative;
}
.editor-page p b,
.editor-page p i,
.redactor-editor p strong,
.redactor-editor p em,
.redactor-editor ul li *,
.redactor-editor ol li *{
	font-family: "Roboto Slab";
}
.editor-page ul,
.redactor-editor ul {
	list-style: inside;
	margin-bottom: 10px;
	font-family: "Roboto Slab";
}
.editor-page ul li,
.redactor-editor ul li {
	font-family: "Roboto Slab";
	list-style: inside;
}
.editor-page .element-label,
.redactor-editor .element-label {
	display: block;
	padding: 5px;
	background: #eee;
}
.editor-page p.image,
.redactor-editor p.image {
	text-align: center;
}

.editor-page .lesson-maps,
.redactor-editor .lesson-maps {
	text-align: center;
	background: #999; color: #fff;
	display: block;
}
.editor-page p img,
.redactor-editor p img {
	max-width: 600px;
}

#editor-page span.index,
.redactor-editor span.index {
	position: absolute;
	display: block;
	left: -30px; top: 0;
}
.redactor-editor ul span.index,
.redactor-editor ol span.index,
.redactor-editor table span.index {
	left: -10px;
}
div.lesson-maps:after {
	content: "Bản đồ"; display: block;
	height: 30px; background: #777;
	color: #fff; text-align: center;
	line-height: 30px;
}
span.video {
	display: block;
	height: 30px; background: #777;
	color: #fff; text-align: center;
	line-height: 30px;
}

.timeline-list {
	background: #efefef;
	padding: 10px;
	border-bottom: 2px solid #999;
}
.timeline-list:after {
	content: ""; display: block;
	clear: both;
}
.timeline-list li {
	width: 50%; float: left;
	margin-bottom: 5px;
	padding: 5px 10px;
	word-wrap: break-word;
	overflow: auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.timeline-list li .node-btn {
	cursor: pointer;
}

.question-list li {
	width: 100%;
	margin-bottom: 5px;
}
/*========================================================*/
/*========================================================*/

#videos-list { width: 100%; height: 160px; padding: 0;}
#videos-list .slidee { margin: 0; padding: 0; height: 100%; list-style: none;}
#videos-list .slidee li { 
	float: left; margin: 0 5px 0 0; 
	padding: 0; width: 120px; 
	height: 100%; background: #000;

}
#videos-list .slidee li.active { 
	background: red; 
	position: relative;
}
#videos-list .slidee li.active:after { 
	content: ""; display: block;
	width: 100%; height: 5px; background: red;
	bottom: 0; left: 0; position: absolute;
}

.scrollbar { 
	width: 100%; height: 5px; 
	margin-bottom: 5px; background: #eee; 
	cursor: pointer; 
}
.scrollbar .handle {
    width: 100px; height: 3px;
    background: #888; border-radius: 2px;
}
#videos-list .slidee li .id {
	background: #000; color: #ccc;
	font-size: 11px; text-align: center;
	padding: 5px 0 0; margin-bottom: 0;
}
#videos-list .slidee li .info {
	padding: 3px; color: #ccc;
	background: #000; font-size: 11px;
	cursor: pointer;
}
#videos-list .slidee li .thumb {
	width: 100%; height: auto;
}
#addTimeline .controls,
#importVideo .controls,
#importMap .controls {
	text-align: center;
	padding: 10px 0;
	position: relative;
}
#addTimeline .controls span.btn,
#importVideo .controls span.btn,
#importMap .controls span.btn {
	margin: 0 10px;
}
#importVideo .controls .add-video,
#importMap .controls .add-map {
	position: absolute;
	top: 10px; right: 10px;
}

#popup-map, #timeline-map {
	width: 100%;
	height: 250px;
	background: #ccc;
}
#maps-list, #timeline-maps-list { 
	width: 100%; height: 100px; padding: 0;
}
#maps-list .slidee,
#timeline-maps-list .slidee { 
	margin: 0; padding: 0; height: 100%; list-style: none;
}
#maps-list .slidee li,
#timeline-maps-list .slidee li { 
	float: left; margin: 0 5px 0 0; 
	padding: 0; width: 120px; 
	height: 100%; background: #f9f9f9;
}
#maps-list .slidee li.active, 
#timeline-maps-list .slidee li.active { 
	background: #eee;
	position: relative;
}
#maps-list .slidee li.active:after, 
#timeline-maps-list .slidee li.active:after { 
	content: ""; display: block;
	width: 100%; height: 5px; background: #2980B9;
	bottom: 0; left: 0; position: absolute;
}
#maps-list .slidee li .id,
#timeline-maps-list .slidee li .id {
	background: #2980B9; color: #fff;
	font-size: 11px; text-align: center;
	height: 20px; line-height: 20px;
	margin-bottom: 0;
	overflow: hidden;
}
#maps-list .slidee li img,
#timeline-maps-list .slidee li img {
	width: 80%; height: auto;
	opacity: 0.3;
}

.reference-list .slidee li,
#pu-questions-list .slidee li { 
	float: left; margin: 0 5px 0 0; 
	padding: 0; width: 140px; 
	overflow: hidden;
	height: 100%; background: #f9f9f9;
	font-size: 12px; padding: 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	cursor: pointer;
}
.reference-list .slidee li.active,
#pu-questions-list .slidee li.active { 
	background: #eee;
	position: relative;
}
.reference-list .slidee li span.id,
#pu-questions-list .slidee li span.id {
	height: 0; width: 0; display: block;
	margin: 0; visibility: hidden;
}

.reference-list .slidee li .id {
	visibility: hidden;
}

#addVideo input.ng-invalid.ng-touched {
	background-color: #FA787E;
}

#addVideo input.ng-valid.ng-touched {
	background-color: #78FA89;
}

#addTimeline .modal-dialog {
	-webkit-transform: translate(50px,0);
	-ms-transform: translate(50px,0);
	-o-transform: translate(50px,0);
	transform: translate(50px,0);
}

#importEvent ul.list {
	height: 350px;
	overflow: auto;
}
#importEvent ul.list li {
	border-bottom: 1px solid #ccc;
	padding: 5px 10px; cursor: pointer;
}
#importEvent ul.list li:nth-child(odd) {
	background: #ECF0F1;
}
#importEvent ul.list li:hover {
	background: #F1C40F;
}
#importEvent ul.list li:active {
	background: #E74C3C;
}